<template>
	<!-- <view style="position: sticky;
		top: 0;
		z-index: 999;">
		<uni-search-bar v-model="searchText" :placeholder="currentPlaceholder" cancelButton="none" bgColor="#fff"
			radius="8" @focus="onSearchFocus" @blur="startPlaceholderRotation"></uni-search-bar>
	</view> -->
	<view style="height: 38px;background-color: #fff;position: sticky;top:0;z-index: 999;"
		class="flex  align-center px-2">
		<view style="height: 28px; width: 100%;border-radius: 14rpx;border:2px solid #ff6f26;"
			class="bg-white  flex align-center justify-between pl-2 position-relative" @click="searchBoxHandle">
			<view class="flex align-center">
				<uni-icons type="search" size="26" color="#bbb"></uni-icons>
				<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
					:show="show">
					<text class="ml-1 text-muted font">{{currentPlaceholder}}</text>
				</uni-transition>

			</view>

			<text
				style="font-size: 16px;margin-left: 10rpx;height: 26px;width: 64px;line-height: 26px;background-color: #ff6f26;border: 1px solid #FFF;font-weight: 600;border-radius: 14rpx;"
				class="position-absolute right-0 top-0 text-center text-white">搜索</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		onBeforeUnmount
	} from 'vue';

	const ani = ref()

	const show = ref(true)
	const modeClass = ref('fade')
	const styles = ref({
		// justifyContent: 'center',
		// alignItems: 'center',
		// width: '100px',
		// height: '100px',
		// borderRadius: '5px',
		// textAlign: 'center',
		// backgroundColor: '#4cd964',
		// boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)'
	})

	const emit = defineEmits(['onSearch'])

	const searchBoxHandle = () => {
		emit('onSearch', currentPlaceholder)
		stopPlaceholderRotation()
	}

	// 定义搜索框的值
	const searchText = ref('');

	// 定义 placeholder 的数组
	const placeholders = [
		'疯狂星期六 5折起',
		'清洁制品年终特惠',
		'黄金水饺开始预约',
		'电视换新享8折',
		'洗护小美plus'
	];

	// 定义当前 placeholder 的索引
	const currentPlaceholderIndex = ref(0);

	// 定义定时器变量
	let timer = null;

	// 计算当前的 placeholder 文本
	const currentPlaceholder = computed(() => {
		return placeholders[currentPlaceholderIndex.value];
	});

	// 启动 placeholder 切换的定时器
	const startPlaceholderRotation = () => {
		timer = setInterval(() => {
			// 更新当前 placeholder 的索引
			currentPlaceholderIndex.value = (currentPlaceholderIndex.value + 1) % placeholders.length;
			handle(['fade', 'zoom-in'])
		}, 3500);
	};

	const handle = (type) => {
		show.value = !show.value
		modeClass.value = type
	}

	// 停止 placeholder 切换的定时器
	const stopPlaceholderRotation = () => {
		if (timer) {
			clearInterval(timer);
			timer = null;
		}
	};

	// 处理搜索框获得焦点事件
	const onSearchFocus = () => {
		stopPlaceholderRotation();
	};

	// 在组件挂载后启动定时器
	onMounted(() => {
		startPlaceholderRotation();
	});

	// 在组件销毁前清除定时器
	onBeforeUnmount(() => {
		stopPlaceholderRotation();
	});
</script>

<style lang="scss">
	:deep(.uni-searchbar) {

		background-color: #fff;
		padding: 5rpx 15rpx !important;
	}

	:deep(.uni-searchbar__box) {

		border: 2rpx solid red;
	}
</style>